<template>
  <div>
    <a-button v-if="displayType === 'BUTTON'" type="primary" @click="showModal">{{ text }}</a-button>
    <a class="gb-display-block" v-if="displayType === 'LINK'" @click="showModal">{{ text }}</a>
    <a-modal 
      :title="text+'样本'"
      centered
      :maskClosable="false"
      :width="800"
      v-model="visible"
      :okText="$t('modal_submit')"
      :cancelText="$t('modal_cancel')"
      @ok="handleOk"
      :okButtonProps="okButtonProps"
    >  
      <a-form :form="form" class="gb-small-form">
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="家系编号"
        >
          <a-input
            v-decorator="[
              'familyCode',
              { initialValue:row.familyCode, rules: [] }
            ]"
            placeholder="样本编号"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="样本编号"
        >
          <a-input
              v-decorator="[
              'sampleCode',
              { initialValue:row.sampleCode, rules: [{ required: true, message: $t('please_input') + '样本编号' + $t('exclamation_mark') }] }
            ]"
              placeholder="样本编号"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="样本类型"
        >
          <DictSelector dictCode="SAMPLE_TYPE" :i18n="false"
            v-decorator="[
              'sampleType',
              { initialValue:row.sampleType, rules: [{ required: true, message: $t('please_input') + '样本类型' + $t('exclamation_mark') }] }
            ]"
            placeholder="样本类型"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="身份证号"
        >
          <a-input v-on:keyup.enter="getSampleInfo"
            v-decorator="[
              'idNumber',
              { initialValue:row.idNumber,  rules: [] }
            ]"
              placeholder="身份证号"
          />
        </a-form-item>
        
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="受检者姓名"
        >
          <a-input
            v-decorator="[
              'sampleName',
              { initialValue:row.sampleName, rules: [{ required: true, message: $t('please_input') + '受检者姓名' + $t('exclamation_mark') }] }
            ]"
            placeholder="受检者姓名"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="性别"
        >
          <DictSelector dictCode="GENDER"
            v-decorator="[
              'gender',
              { initialValue:row.gender, rules: [{ required: true, message: $t('please_input') + '性别' + $t('exclamation_mark') }] }
            ]"
            placeholder="性别"
          />
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="年龄"
        >
          <a-input-number class="extend-col-1"
            v-decorator="[
              'age',
              { initialValue:row.age,  rules: [{ required: true, message: $t('please_input') + '年龄' + $t('exclamation_mark') }] }
            ]"
            placeholder="年龄"
          />
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="出生日期"
        >
          <a-date-picker class="extend-col-1"
            v-decorator="[
              'birthDate',
              { initialValue:row.birthDate,  rules: [] }
            ]"
            placeholder="出生日期"
          />
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="样本采集时间"
        >
          <a-date-picker show-time class="extend-col-1"
            v-decorator="[
              'collectionTime',
              { initialValue:row.collectionTime,  rules: [] }
            ]"
            placeholder="样本采集时间"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="样本接收时间"
        >
          <a-date-picker show-time class="extend-col-1"
            v-decorator="[
              'receiveTime',
              { initialValue:row.receiveTime,  rules: [] }
            ]"
            placeholder="样本接收时间"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="关联医生"
        >
          <DoctorCascaderSelector
              v-decorator="[
                'doctorInfo',
                { initialValue: doctorInfo, rules: [{ required: true, message: '请选择医生' + $t('exclamation_mark') }] }
              ]"
              placeholder="关联医生"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="门诊号"
        >
          <a-input
              v-decorator="[
              'clinicNumber',
              { initialValue:row.clinicNumber,  rules: [] }
            ]"
              placeholder="门诊号"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="住院号"
        >
          <a-input
              v-decorator="[
              'hospitalNumber',
              { initialValue:row.hospitalNumber,  rules: [] }
            ]"
              placeholder="住院号"
          />
        </a-form-item>

        <a-form-item
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :colon="false" label="就诊卡号"
        >
          <a-input
              v-decorator="[
              'medicalCardNumber',
              { initialValue:row.medicalCardNumber,  rules: [] }
            ]"
              placeholder="就诊卡号"
          />
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
    doctorInfo() {
      let result = this.row || {}
      if (!result.id) {
        result = this.userInfo || {}
      }
      return [result.unitId, result.departmentId, result.doctorId]
    }
  },
  props: {
    text: { type: [String] },
    displayType: { type: [String], default: 'BUTTON' },
    callback: { type: [Function] },
    row: { type: [Object], default: () => { return {} } },
    url: { type: [String] },
  },
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      visible: false,
      okButtonProps: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      ts: 0,
    }
  },
  methods: {
    showModal() {
      this.form.resetFields();
      this.visible = true
      this.okButtonProps = {}
      this.ts = new Date().getTime()
    },
    handleOk() {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        if (!formValue.userPosition) {
          formValue.userPosition = ''
        }

        this.okButtonProps ={ props: {disabled: true} }
        // submit
        axios({
          method: 'post',
          url: this.url,
          data: {
            id: this.row.id,
            unitId: formValue.doctorInfo[0] || '',
            departmentId: formValue.doctorInfo[1] || '',
            doctorId: formValue.doctorInfo[2] || '',
            ...formValue
          },
        }).then(() => {
          this.visible = false
          if(this.callback) {
            this.callback();
          }
          this.$success({
            title: this.$t('success_message'),
            content: this.$t('submit_success'),
            okText: this.$t('modal_ok'),
          });
        }).catch(() => {
          this.okButtonProps = {}
        });
        
      });
    },
    getSampleInfo() {
      axios({
        url: '/backend/sample/getSampleByIdNumber',
        method: 'get',
        params: {
          idNumber: this.form.getFieldValue('idNumber')
        },
      }).then((res) => {
        let data = res.data || {}
        this.form.setFieldsValue({
          "sampleName": data.sampleName,
          "gender": data.gender,
          "age": data.age
        })
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
